<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>user</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>
</head>
<body class="layui-container">
<form class="layui-form form-opAdmins layui-form-pane" autocomplete="off">
    <div class="layui-form-item">
        <label class="layui-form-label">类型：</label>
        <div class="layui-input-inline">
            <select name="typeId" id="typeId" required lay-verify="required">
                <option value="">--请选择--</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标题：</label>
        <div class="layui-input-inline">
            <input type="text" name="title" required lay-verify="required"
                   placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">日期：</label>
        <div class="layui-input-inline">
            <input placeholder="请选择日期" type="text" class="layui-input" id="billTime"
                   name="billTime" required lay-verify="required"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">金额：</label>
        <div class="layui-input-inline">
            <input type="number" name="price" required lay-verify="required"
                   placeholder="请输入金额" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">说明：</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" name="explain" type="text/plain"
                      style="width:99%;height:250px" placeholder="请输入说明"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block div-form-op">
            <button class="layui-btn" type="button" onclick="add()"
                    lay-submit lay-filter="formDemo">添加
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
<script>
    $(function () {
        // 加载类型列表
        $.ajax({
            type: "GET",
            url: "http://localhost:9004/api/billType/list",
            data: {},
            dataType: "json",
            async: false,
            success: function (data) {
                if (data.code = 200) {
                    var list = data.list;
                    var html = "<option value=''>--请选择--";
                    for (var i = 0; i < list.length; i++) {
                        var type = list[i];
                        html += "<option value=" + type.id + ">" + type.name;
                    }
                    $("#typeId").html(html);
                } else {
                    alert('类型加载失败');
                }
            }
        });
    });

    layui.use(['form', 'layer'], function () {
        // 加载表单
        var form = layui.form;
    });

    layui.use('laydate', function () {
        // 加载日期控件
        var laydate = layui.laydate;
        laydate.render({
            elem: "#billTime", //绑定id为date4的元素
            type: "date" // 年月日选择器
        });
    });


    function add() {
        // 新增
        $.ajax({
            type: "POST",
            url: "http://localhost:9004/api/bill",
            data: $(".layui-form").serialize(),
            success: function (data) {
                if (data.code == 200) {
                    layer.alert("新增成功", {
                        time: 2000
                        , success: function (layero, index) {
                        }
                        , end: function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前 iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            parent.layui.table.reload('demo');
                        }
                    });
                } else {
                    layer.msg(data.msg);
                }
            }
        });
    }
</script>
</html>
